<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02事件修饰符</title>
		<script src="../../js/vue.js"></script>
		<style>
			* {
				margin: 10px;
			}

			.one {
				width: 500px;
				height: 200px;
				background-color: salmon;
			}

			.btn-one {
				width: 400px;
				height: 100px;
				background-color: blue;
				font-size: 16px;
				color: white;
			}
		</style>
	</head>
	<body>
		<!-- 
			Vue中的事件修饰符:
					1.prevent: 阻止默认事件（常用）;
					2.stop:阻止事件冒泡（常用）;
					3.once:事件只触发一次（常用);
					4.capture:使用事件的捕获模式;
					5.self:只有event.target是当前操作的元素是才触发事件;
					6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕: 
			注意：
					修饰符可以连续写以及组合使用
		    -->
		<div id="root">
			<h1>欢迎来到{{name}}</h1>
			<!-- prevent: 阻止默认事件（常用） -->
			<a href="https://www.baidu.com" @click.prevent="showInfo">点我显示信息(prevent 阻止默认事件 常用)</a>

			<!-- stop:阻止事件冒泡(常用); -->
			<div class="one" @click="showInfo()">
				<button class="btn-one" @click.stop="showInfo">点我显示信息(stop:阻止事件冒泡(常用))</button>
				<br />
				<!-- 修饰符可以连续写 -->
				<!-- 先阻止冒泡再阻止默认 -->
				<a href="https://www.baidu.com" @click.stop.prevent="showInfo">点我显示信息(prevent 阻止默认事件 常用)</a>
			</div>

			<!-- once:事件只触发一次(常用); -->
			<button class="btn-two" @click.once="showInfo">点我显示信息(once:事件只触发一次（常用))</button>
		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						name: '读书点点'
					}
				},
				methods: {
					showInfo() {
						alert('daxing');
						console.log('daxing');
					}
				}
			});
		</script>
	</body>
</html>